<template>
    <div class="news-container">
        <ul class="news-list">
            <li v-for="(item, index) in newsList" :key="index" class="news-item">
                <a :href="`/news-detail?id=${item.id}&category=${router.currentRoute.name}`"
                    ><img :src="item.imgUrl" :alt="item.title" class="news-img" />
                    <p class="news-title">{{ item.title }}</p></a
                >
            </li>
        </ul>
        <div class="pagination clearfix">
            <el-pagination background layout="pager, next" :total="total" @current-change="handleCurrentChange">
            </el-pagination>
            <p class="total">
                总共<span>{{ total }}</span
                >条
            </p>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import router from '@/router/index'
// TODO 从接口获取
const total = ref(54)
const newsList = ref([
    {
        imgUrl: 'https://www.sincopharmachem.com.cn/Images/blog/230714023247_7699.jpg',
        title: '盛夏时节，共赴生辰|菲斯生物第二季度生日会',
        id: 1,
    },
    {
        imgUrl: 'https://www.sincopharmachem.com.cn/Images/blog/230714021400_5479.jpg',
        title: 'E-G04|苏州CMC-China，菲斯期待与您相聚！',
        id: 2,
    },
    {
        imgUrl: 'https://www.sincopharmachem.com.cn/Images/blog/230714020015_8384.jpg',
        title: '抗流感新药-超级达菲-巴洛沙韦酯',
        id: 3,
    },
    {
        imgUrl: 'https://www.sincopharmachem.com.cn/Images/blog/230707023148_3070.png',
        title: '七月SINCO最新入库杂质对照品，现货等您来选！',
        id: 4,
    },
    {
        imgUrl: 'https://www.sincopharmachem.com.cn/Images/blog/230707015822_7608.jpg',
        title: '喹拉戈利-口服GnRH拮抗剂|菲斯生物优势供应相关研究杂质',
        id: 5,
    },
    {
        imgUrl: 'https://www.sincopharmachem.com.cn/Images/blog/230625030323_8961.jpg',
        title: 'CPHI圆满落幕，8月苏州CMC我们再见！',
        id: 6,
    },
    {
        imgUrl: 'https://www.sincopharmachem.com.cn/Images/blog/230516043601_4923.png',
        title: '六月SINCO新入库杂质对照品，现货等您来选！',
        id: 7,
    },
    {
        imgUrl: 'https://www.sincopharmachem.com.cn/Images/blog/230621045436_3103.jpg',
        title: 'N1A29 | 上海CPHI | 菲斯生物期待与您相约',
        id: 8,
    },
])

const filters = ref({
    page: 1,
    size: 100,
    name: router.currentRoute.name, // TODO: 区分新闻还是活动
})
const handleCurrentChange = (val) => {
    filters.value.page = val
    // TODO
}
</script>

<style lang="scss" scoped>
.news-container {
    width: 100%;
    .news-list {
        &:after {
            content: '';
            display: table;
            clear: both;
        }

        .news-item {
            height: 250px;
            float: left;
            width: 23%;
            margin: 1%;
            background: #fff;
            overflow: hidden;

            &:hover {
                img {
                    transform: scale(1.1);
                    transition: all 0.3s ease;
                }
            }

            .news-img {
                width: 100%;
                display: block;
                overflow: hidden;
                transition: all 0.3s;
            }

            .news-title {
                padding: 12px;
                margin: 0;
                font-size: 14px;
                color: #333;
                line-height: 1.4;
                height: 60px;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }
    }
}

.pagination {
    margin: 20px 0 30px;
    padding-top: 10px;
    border-top: 1px solid #efefef;
    .el-pagination {
        float: left;

        :deep(.number.active) {
            background-color: #00a0e9 !important;
        }
    }

    .total {
        color: #000;
        font-size: 16px;
        float: right;
    }
}

@media screen and (max-width: 1200px) {
    .news-list .news-item {
        width: 31.33%;
        margin: 1%;
    }
}

@media screen and (max-width: 768px) {
    .news-list .news-item {
        width: 48%;
        margin: 1%;
    }
}

@media screen and (max-width: 480px) {
    .news-list .news-item {
        width: 98%;
        margin: 1%;
    }
}
</style>
